<template>
  <div>
    <van-nav-bar title="我的收藏" left-arrow @click-left="$router.back()" />
    <!-- 遍历newArr -->
    <van-swipe-cell
      v-for="item in newArr"
      :key="item.id"
      @click.native="toCommentList(item.id)"
    >
      <newsItem :obj="item"> </newsItem>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="delFn(item.id)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { user_star, post_star } from "@/api/news";
export default {
  data() {
    return {
      newArr: [], //收藏列表数据
    };
  },
  created() {
    //初始化实现
    this.getUser_stat();
  },
  methods: {
    //封装收藏接口
    getUser_stat() {
      user_star().then((res) => {
        console.log(res);
        //数据传到this.newArr里面
        this.newArr = res.data.data;
      });
    },
    //跳转到articleDetail.vue（文章详情页面）
    toCommentList(id) {
      this.$router.push({
        path: "/articleDetail",
        query: {
          id,
        },
      });
    },
    delFn(id) {
      console.log(id);
      //取消收藏接口
      post_star(id).then((res) => {
        console.log(res);
        //更新浏览器
        this.getUser_stat();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>